<template>
<div>
  <el-breadcrumb>
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
  </el-breadcrumb>
  <div class="content search_form">
    <e-cellbox middle class="title-manage">
      <e-cell-item>
        <e-heading grade='1'>{{title}}</e-heading>
      </e-cell-item>
      <!--
      <e-cell-item class="tr small weak">
        <el-button size="small" @click="handleAddClass"  type="primary" v-if="roleType != 99">新增班级</el-button> 
      </e-cell-item>
      -->
    </e-cellbox>
    <el-form v-bind="getFormProps()" label-width="80px" label-position="left" style="margin:0 10px;">
      <el-row class="class_serach_form">
        <el-col :span="8">
          <el-form-item label="课 程：" label-width="60px">
            <el-select size="small" v-model="form.curriculum" clearable value-key="id" placeholder="请选择课程" style="width: 88%;">
              <el-option v-for="item in train_selectclass_list" :key="item.id" :label="item.courseName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校 区：" label-width="60px">
            <el-select size="small" v-model="form.campus" clearable value-key="id" placeholder="请选择校区" style="width: 88%;">
              <el-option v-for="item in schoolList" :key="item.id" :label="item.schoolName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"  v-if="roleType != 99"></el-col>
        <el-col :span="8"  v-if="roleType != 99">
          <el-form-item label="教 练：" label-width="60px">
            <el-select size="small" v-model="form.coach" value-key="id" clearable placeholder="请选择教练" style="width: 88%;">
              <el-option v-for="item in train_teacher_list" :key="item.id" :label="item.teacherName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="6" >
          <el-form-item label="" label-width="0">
            <el-input size="small" v-model="form.keyword" placeholder="请输入搜索内容" style="width: 98%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label-width="20px">
            <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="课程性质：" label-width="90px">
        <el-checkbox-group v-model="form.courseType">
          <el-checkbox label="0">专业课</el-checkbox>
          <el-checkbox label="1">综合课</el-checkbox>
          <el-checkbox label="2">次课</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="开课状态：" label-width="90px">
        <el-checkbox-group v-model="form.classState">
          <el-checkbox label="0">未开课</el-checkbox>
          <el-checkbox label="1">上课中</el-checkbox>
          <el-checkbox label="2">已上完</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <!--tableList-->
    <div class="table_list table_class">
      <div class="total_tip">当前结果: 共计<span class="total_color">{{train_class_list.pageInfo && train_class_list.pageInfo.total}}</span>个班级 | <span class="total_color">{{train_class_list.studentCount}}</span>名在读学员</div>
      <el-table
        v-bind="getTableProps()"
        empty-text="暂无班级"
        :data="train_class_list.pageInfo && train_class_list.pageInfo.list">
        <el-table-column
          label="班级名称"
          :show-overflow-tooltip="true"
          >
          <template slot-scope="scope">
            <router-link :to="{path: '/training/class/detail', query: {
              id: scope.row.id, 
              crruid: scope.row.courseId,
              courseType: scope.row.properties
              }}" class="state link" tag="a" v-if="scope.row.courseType != 2">{{ scope.row.className}}</router-link>
            <router-link :to="{path: '/training/class/detailTime', query: {id: scope.row.id, crruid: scope.row.courseId}}" class="state link" tag="a" v-else>{{ scope.row.className}}</router-link>
            <p class="state_class statr_yellow" v-if="scope.row.startStatus == 0"></p>
            <p class="state_class statr_green" v-if="scope.row.startStatus == 1"></p>
            <p class="state_class statr_gren" v-if="scope.row.startStatus == 2"></p>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          :show-overflow-tooltip="true"
          label="课程"
          width="130">
          <template slot-scope="scope">
           <span>{{ scope.row.courseName }}</span>
           <p :class="['state_sred1','state_green1','state_warn1'][scope.row.properties]"></p>
          </template>
        </el-table-column>
        
        <el-table-column
          width="110"
          align="center"
          :show-overflow-tooltip="true"
          label="校区/班别">
          <template slot-scope="scope">
            <span>{{scope.row.schoolName ? scope.row.schoolName : '-'}}</span>
            <p>{{scope.row.classesName ? scope.row.classesName : '-'}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="上课周期"
          :show-overflow-tooltip="true"
          align="center"
          width="160">
          <template slot-scope="scope">
            <p v-if="scope.row.courseType != 2">{{scope.row.beginTime | FormatDate('yyyy-MM-dd')}} - {{scope.row.endTime | FormatDate('yyyy-MM-dd')}}</p>
            <span>{{scope.row.weekCycle | getWeekList}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="课时数"
          width="60">
          <template slot-scope="scope">
            {{scope.row.courseType == 2 ? '-' : scope.row.lessonCount}}
          </template>
        </el-table-column>
        <el-table-column
          prop="treachNames"
          align="center"
          :show-overflow-tooltip="true"
          label="教练"
          width="70">
          <template slot-scope="scope">{{scope.row.treachNames ? scope.row.treachNames : '-'}}</template>
        </el-table-column>
        <el-table-column
          prop="studentCount"
          align="center"
          label="人数"
          :show-overflow-tooltip="true"
          width="50">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="70">
          <template slot-scope="scope">
            <!-- startStatus 0-未开课 1-上课中 2-已上完 -->
            <!-- courseType 0-专业课 1-综合课 2-次课 -->
            <p><el-button @click="handleEdit(scope.row.id, scope.row.weekCycle, scope.row.startStatus, scope.row.courseType)" type="link" v-if="scope.row.startStatus != 2 && roleType != '99'">编辑</el-button></p>
            <p><el-button @click="handleDelete(scope.row.id)" type="link" v-if="scope.row.studentCount == 0 && roleType != '99' && scope.row.courseType != 2">删除</el-button></p>
            <p><el-button @click="handleLinkPlan(scope.row.id, scope.row.className)" type="link" v-if="scope.row.courseType != 2">训练大纲</el-button></p>
            <p><el-button type="link" v-if="scope.row.startStatus != 2 && roleType != '99'" @click="handleAddStudent(scope.row)">学员分班</el-button></p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <el-pagination
      v-bind="getPaginationProps(train_class_list.pageInfo)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
import trainApi from 'api/train'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_currilum_list: 'train_currilum_list',
      train_class_list: 'train_class_list',
      train_teacher_list: 'train_teacher_list',
      train_selectclass_list: 'train_selectclass_list',
      train_compus_selection: 'train_compus_selection'
    }),
    provinceAreaOptions () {
      if (this.train_compus_selection && this.train_compus_selection.length > 0) {
        let arr = this.train_compus_selection
        let result = []
        for (let item of arr) {
          let mid = {
            id: `${item.provinceId}${item.cityId}`,
            value: [item.provinceId, item.cityId],
            text: `${item.provinceName}-${item.cityName}`
          }
          result.push(mid)
        }
        return result
      }
    },
    address: {
      get () {
        if (this.query.provinceId) {
          return `${this.query.provinceId}${this.query.cityId}`
        } else {
          this.query.provinceId = ''
          this.query.cityId = ''
          return ''
        }
      },
      set (newVal) {
        if (newVal) {
          for (let item of this.provinceAreaOptions) {
            let itemId = item.id
            if (itemId === newVal) {
              this.query.provinceId = item.value[0]
              this.query.cityId = item.value[1]
            }
          }
        } else {
          this.query.provinceId = ''
          this.query.cityId = ''
        }
      }
    }
  },
  watch: {
    'form.curriculum' (value) {
      this.query.courseId = value.id
      this.query.curricuNmae = value.courseName
    },
    'form.campus' (value) {
      this.query.schoolId = value.id
      this.query.schoolName = value.schoolName
    },
    'form.coach' (value) {
      this.query.teacherId = value.id
      this.query.teacherName = value.teacherName
    },
    'form.keyword' (value) {
      this.query.searchContent = value
    },
    'form.courseType' (value) {
      this.query.courseType = value.join()
    },
    'form.classState' (value) {
      this.query.classStatus = value.join()
    },
    '$route': function () {
      if (JSON.stringify(this.$route.query) === '{}') {
        this.form.curriculum = {}
        this.form.campus = {}
        this.form.coach = {}
        this.form.keyword = ''
        this.form.courseType = []
        this.form.classState = []
      }
    }
  },
  mounted () {
    this.roleType = localStorage.getItem('role_type')
    this.form.curriculum = {
      id: this.query.courseId ? Number(this.query.courseId) : '',
      courseName: this.query.curricuNmae ? this.query.curricuNmae : ''
    }
    this.form.campus = {
      id: this.query.schoolId ? Number(this.query.schoolId) : '',
      schoolName: this.query.schoolName ? this.query.schoolName : ''
    }
    this.form.coach = {
      id: this.query.teacherId ? Number(this.query.teacherId) : '',
      teacherName: this.query.teacherName ? this.query.teacherName : ''
    }
    this.form.keyword = this.query.searchContent
    this.form.courseType = this.query.courseType ? this.query.courseType.split(',') : []
    this.form.classState = this.query.classStatus ? this.query.classStatus.split(',') : []
    this.$store.dispatch('train_teacher_list')
    this.$store.dispatch('train_selectclass_list')
    this.getSchoolList()
    this.$store.dispatch('train_compus_selection')
  },
  data () {
    return {
      title: '班级列表',
      roleType: '',
      query: this.getQuery({
        provinceId: this.$route.query.provinceId || null,
        cityId: this.$route.query.cityId || null
      }),
      form: {
        curriculum: '',
        campus: '',
        keyword: '',
        coach: '',
        courseType: [],
        classState: []
      },
      schoolList: []
    }
  },
  methods: {
    fetch (query) {
      this.$store.dispatch('train_class_list', query)
    },
    getSchoolList () {
      trainApi.schoolList({
        page: 1,
        rows: 100000
      }).then((res) => {
        this.schoolList = res.data.list
      })
    },
    handleAddStudent ({ courseType, courseId, classesId, id }) { // 学员分班
      let isCk = Boolean(courseType - 0 === 2)
      let path = isCk ? '/training/class/addtimestudent' : '/training/class/addstudent'
      let query = isCk ? {courseId, classId: id, classesId} : {classId: id}
      this.$router.push({
        path,
        query
      })
    },
    handleLinkPlan (classid, classname) { // 教学计划页面
      this.$router.push({path: '/training/class/program', query: {classid: classid, classname: classname}})
    },
    handleAddClass () {
      if (!this.train_selectclass_list.some(item => item.properties !== 2)) {
        this.$message({
          message: '课程审核通过后才可新增班级哦',
          type: 'warning'
        })
      } else {
        this.$router.push({path: '/training/class/add'})
      }
    },
    handleEdit (id, weekCycle, status, courseType) { // 编辑
      let url = courseType === 2 ? '/training/class/editTime' : '/training/class/add'
      this.$router.push({path: url, query: {id: id, isedit: 'edit', weekdays: weekCycle, status: status, courseType: courseType}})
    },
    handleDelete (classId) { // 删除
      this.$confirm('确认删除该班级吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        trainApi.classRemove({
          id: classId
        }, {
          successMsg: '删除成功'
        }).then((res) => {
          this.fetch(this.query)
        })
      }).catch(() => {
        return false
      })
    }
  }
}
</script>
<style lang="scss">
.title-manage {
    margin-top: -25px;
}
.class_serach_form{
  .el-col{
    height:59px;
  }
}
.table_class{
  .total_color{
    color:#fd6f01;
  }
  .total_tip{
    text-align: center;
    background:#d9e3ee;
    line-height: 32px;
  }
  .el-button--link{
    line-height:18px;
  }
  .el-tooltip.cell{
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
  }
  td{
    position: relative;
    .state_class{
      display: block;
      width:42px;
      text-align: center;
      padding: 0 2px;
      line-height:16px;
      height:16px;
      color: #fff;
      font-size:12px;
    }
    .statr_green{
      &::after{
        content: '上课中';
      }
      background:#019b6e;
    }
    .statr_yellow{
      &::after{
        content: '未开课';
      }
      background: #f06802;
    }
    .statr_gren{
      &::after{
        content: '已上完';
      }
      background: #ccc;
    }
    .state_green1,
    .state_sred1,
    .state_warn1{
      display: block;
      background:#0ab885;
      color:#fff;
      height:16px;
      width:16px;
      line-height: 16px;
      text-align: center;
      &::after{
        content: '综'
      }
    }
    .state_sred1{
      background:#ff6465;
      &::after{
        content: '专'
      }
    }
    .state_warn1{
      background:rgb(140, 64, 190);
      &::after{
        content: '次'
      }
    }
  }
  
  .logo{
    width:40px;
    height:30px;
  }
}
</style>
